{% extends 'index.html' %}
{% load static %}
{% block auth %}
    <p class="out"><a href="/index/" style="margin-right: 50px">刷新</a><a href="/logout/">退出登录</a></p>
    {% if type == 1 %}
        <p class="a-title">亲爱的<span class="a-auth">{{ user.first_name }}</span>同学！</p>
        <div id="a-content">
            <div id="a-content-left">
                <div class="a-content-left hid" name="base-info">基本信息</div>
                <div class="a-content-left" name="weixin">绑定微信</div>
                <div class="a-content-left" name="exp">修改经验</div>
                <div class="a-content-left" name="clear">清除数据</div>
                <div class="a-content-left" name="more">更多功能敬请期待...</div>
            </div>
            <div id="a-content-right">
                <div class="base-info zz">
                    <p><span class="rem">************通用信息************</span></p>
                    <p><span class="rem">学生ID：<span class="tishi">{{ user.id }}</span></span></p>
                    <p><span class="rem">是否绑定微信：<span class="tishi">{{ is_weinxin }}</span></span></p>
                    {% if is_daan %}
                        <p><span class="rem">是否有答案权限：<span class="tishi">有</span></span>
                            <a href="/update/answer?type=0" class="btn btn-primary m-l" style="padding: 5px">取消答案</a>
                        </p>
                    {% else %}
                        <p><span class="rem">是否有答案权限：<span class="tishi">无</span></span>
                            <a href="/update/answer?type=1" class="btn btn-primary m-l">添加答案</a>
                        </p>
                    {% endif %}
                    <p><span class="rem">************科目信息************</span></p>
                    <ul id="myTab" class="nav">
                        <li class="dropdown">
                            <button id="myTabDrop1" class="btn btn-default dropdown-toggle rem"
                                    data-toggle="dropdown"><span id="dropdown">请点击选择</span>
                                <b class="caret"></b></button>
                            <span class="m-l"><span class="glyphicon glyphicon-hand-left"></span>点击左边按钮查看不同项目</span>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                                {% for o in pro_info %}
                                    <li><a href="#{{ o.p_id }}{{ o.user_book_id }}" tabindex="-1" data-toggle="tab">{{ o.p_name }}</a></li>
                                {% endfor %}
                            </ul>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        {% for o in pro_info %}
                            <div class="tab-pane fade" id="{{ o.p_id }}{{ o.user_book_id }}">
                                <p style="margin-top: 20px;"><span class="rem">头像：<span class="tishi">暂不支持</span></span>
                                </p>
                                <p><span class="rem">当前经验值：<span class="tishi">{{ o.exp }}</span>
                                            <span class="m-l">等级：</span><span class="tishi">{{ o.level }}</span>
                                            <span class="m-l">称号：</span><span class="tishi">{{ o.honer }}</span>
                                        </span></p>
                                <p><span class="rem">当前教材：<span class="tishi">{{ o.book }}</span></span></p>
                                <p><span class="rem">当前班级：<span
                                        class="tishi">{{ o.cls.name }}({{ o.cls.id }})</span></span></p>
                                <p><span class="rem">当前课时：<span
                                        class="tishi">{{ o.current.c_name }}({{ o.current.c_id }})</span></span></p>
                                <p><span class="rem">当前关卡：<span class="tishi">{{ o.current.level }}</span></span></p>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="weixin zz" style="display: none">
                    <p><span class="rem">微信绑定、解绑、更换用户：</span></p>
                    <p><span class="rem">当前状态：<span class="tishi">{{ is_weinxin }}</span></span>
                        <button name="1" class="btn btn-info open-sub" style="margin-left: 20%">解绑</button>
                    </p>
                    <p><span class="rem">微信绑定流程：</span></p>
                    <p class="m-l rem">1、绑定优鸿教育微信公众号 <br>
                        <img class="money" src="{% static 'imgs/yh_weixin.jpg' %}" style="margin-left: 30px;">
                        <br>2、向系统发送“//openid”，等待系统返回字符串
                        <br>3、将返回的字符串粘贴到下面的输入框内，点击提交即可。
                    </p>
                    <p class="m-l rem">字符串粘贴处：<input id="openid" type="text"></p>
                    <p class="m-l">
                        <button name="2" class="btn btn-info open-sub">提交</button>
                    </p>
                    <span class="m-l">提示：若之前绑定过，提交输入框为空即可</span>
                </div>
                <div class="exp zz" style="display: none">
                    <p class="rem">修改经验：</p>
                    {% for o in exp_info %}
                        <p><span class="rem">项目：<span class="tishi">{{ o.p_name }}</span>
                            <span class="e-info-{{ o.p_id }}"
                                  style="font-size: 1rem;margin-left: 20px;color: red"></span></span></p>
                        <p class="m-l">
                            <span class="rem">当前经验值：<span id="{{ o.p_id }}exp" class="tishi">{{ o.exp }}</span>
                                            <span class="m-l">等级：</span><span id="{{ o.p_id }}level"
                                                                              class="tishi">{{ o.level }}</span>
                                            <span class="m-l">称号：</span><span id="{{ o.p_id }}honer"
                                                                              class="tishi">{{ o.honer }}</span>
                                        </span><br>
                            <button p="{{ o.p_id }}" class="btn btn-default u-exp" name="110">+10exp</button>
                            <button p="{{ o.p_id }}" class="btn btn-default u-exp" name="120">+20exp</button>
                            <button p="{{ o.p_id }}" class="btn btn-default u-exp" name="150">+50exp</button>
                            <button p="{{ o.p_id }}" class="btn btn-default u-exp" name="1100">+100exp</button>
                            <button p="{{ o.p_id }}" class="btn btn-warning u-exp" name="210">-10exp</button>
                            <button p="{{ o.p_id }}" class="btn btn-warning u-exp" name="220">-20exp</button>
                            <button p="{{ o.p_id }}" class="btn btn-warning u-exp" name="250">-50exp</button>
                            <button p="{{ o.p_id }}" class="btn btn-warning u-exp" name="2100">-100exp</button>
                        </p>
                    {% endfor %}
                </div>
                <div class="clear zz" style="display: none">

                    <ul id="myTab-2" class="nav">
                        <li class="dropdown">
                            <button id="myTabDrop2" class="btn btn-info dropdown-toggle rem"
                                    data-toggle="dropdown"><span id="dropdown-2">请点击选择</span>
                                <b class="caret"></b></button>
                            <span class="m-l"><span class="glyphicon glyphicon-hand-left"></span>点击左边按钮查看不同项目</span>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                                {% for o in pro_info_1 %}
                                    <li><a href="#" name="{{ o.p_id }}" ubd="{{ o.user_book_id }}" tabindex="-1" data-toggle="tab-2">{{ o.p_name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                    </ul>
                    <br>
                    <div id="clear-content" style="display: none">
                        <p><span class="rem">当前课时：<span
                                class="tishi" id="c-cid">ID(12)</span>与课堂督导保持一致</span></p>
                        <p><span class="rem">当前关卡：<span class="tishi" id="c-lid">第4关</span></span></p>
                        <p class="rem">**************清除当前数据***************：</p>
                        <p>
                            <button name="1" class="btn btn-warning rem cclear">清除当前关卡</button>
                            <button name="2" class="btn btn-warning rem cclear">清除当前课时</button>
                        </p>
                        <p class="rem">**************选择清除数据***************：</p>
                        <p class="rem">
                            <label>课时ID:</label><input class="c-clear" id="catalog_id" type="number" placeholder="课时ID">
                            <label>关卡:</label><input class="c-clear" id="level_id" type="number" max="7" placeholder="关卡">
                            <br>
                            <span style="font-size: 1rem">提示：将清楚目标关卡以后的所有关卡，清空该课时关卡请填写0</span> <br>
                            <button name="3" class="btn btn-warning rem cclear" style="margin-top: 10px;width: 300px"> 提交</button>
                        </p>
                        <p class="rem">**************清空所有数据***************：</p>
                        <button class="btn btn-danger rem cclear" name="4" style="margin-top: 10px;width: 300px">清空所有数据(慎重操作)</button>
                        <div id="c-rizhi">
                            <p class="rem">这里显示日志信息:</p>
                            <p class="c-rizhi">
                        </p>
                        </div>
                    </div>
                    <script src="{% static 'clear.js' %}"></script>
                </div>
            <div class="more zz" style="display: none">
                    <p><span class="rem">更多功能敬请期待！！！</span></p>
                </div>
            </div>
        </div>
        <script>
            $('.u-exp').click(function () {
                var type = $(this).attr('name');
                var p_id = $(this).attr('p');
                var str = $('#' + p_id + 'exp').text();
                console.log('点击了修改经验');
                console.log(type, str, p_id);
                settings = {
                    url: "/update/exp/",
                    type: 'get',
                    data: {"type": type, "value": str, "p_id": p_id},
                    success: function (data) {
                        console.log(data.message);
                        if (data.data.status == 1) {
                            $('#' + p_id + 'exp').text(data.data.exp);
                            $('#' + p_id + 'level').text(data.data.level);
                            $('#' + p_id + 'honer').text(data.data.honer);
                            $('.e-info-' + p_id).text('您刚刚操作：' + data.data.last + 'exp！操作成功！当前：' + data.data.exp)
                        }
                    }
                };
                $.ajax(settings)
            });
            $('.open-sub').click(function () {
                var type = $(this).attr('name');
                var str = $('#openid').val();
                settings = {
                    url: "/update/weixin/",
                    type: 'get',
                    data: {"type": type, "openid": str},
                    success: function (data) {
                        alert(data.message);
                        if (data.status == 1) {
                            window.location.reload()
                        }
                    }
                };
                $.ajax(settings)
            });
            $(function () {
                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                    var activeTab = $(e.target).text();
                    $("#dropdown").html(activeTab);
                });
            });
        </script>
    {% else %}
        <p class="a-title">尊敬的<span class="a-auth">{{ user.first_name }}</span>老师！</p>
        <div id="a-content">
            <div id="a-content-left">
                <div class="a-content-left hid" name="base-info">基本信息</div>
                <div class="a-content-left" name="get-zige">获取督导资格</div>
                <div class="a-content-left" name="more">更多功能...</div>
            </div>
            <div id="a-content-right">
                <div class="base-info zz">
                    <p><span class="rem">教师ID：<span class="tishi">{{ user.id }}</span></span></p>
                    <p>
                        <span class="rem">管理班级(cls_id)：</span><br>
                        {% for o in cls_info %}
                            <span class="rem m-l" style="color: dodgerblue">{{ o.name }}({{ o.id }})</span>
                        {% endfor %}
                    </p>
                    <p>
                        <span class="rem">当前督导资格：</span><br>
                        {% for o in pro_info %}
                            {% if o.status == 1 %}
                                <p class="rem m-l"
                                   style="color: dodgerblue">{{ o.project_name }}({{ o.project_id }}):有</p>
                            {% else %}
                                <p class="rem m-l" style="color: grey">{{ o.project_name }}({{ o.project_id }}):无</p>
                            {% endif %}
                        {% endfor %}
                    </p>
                </div>
                <div class="get-zige zz" style="display: none">
                    <p><span class="rem">未通过培训的科目：</span></p>
                    {% if not need %}
                        <p><span class="rem m-l tishi">您目前没有需要获取督导资格的科目！</span></p>
                    {% else %}
                        {% for o in need %}
                            <p><span class="rem m-l tishi">{{ o.name }}</span>
                                <button id="{{ o.id }}" type="button"
                                        class="btn btn-primary pass" style="margin-left: 20%">点我通过培训
                                </button>
                                <button type="button"
                                        class="btn btn-disabled" disabled style="margin-left: 20%">反向功能
                                </button>
                            </p>
                        {% endfor %}
                    {% endif %}
                    <p><span class="rem">已培训完成的科目：</span></p>
                    {% if not already_info %}
                        <p><span class="rem m-l tishi">您目前没有已获取督导资格的科目！</span></p>
                    {% else %}
                        {% for o in already_info %}
                            <p><span class="rem m-l tishi">{{ o.project_name }}</span>
                                <button type="button"
                                        class="btn btn-disabled" disabled style="margin-left: 20%">点我通过培训
                                </button>
                                <button id="{{ o.project_id }}" type="button"
                                        class="btn btn-primary pass1" style="margin-left: 20%">反向功能
                                </button>
                            </p>
                        {% endfor %}
                    {% endif %}
                </div>
                <div class="more zz" style="display: none">
                    <p><span class="rem">更多功能敬请期待！！！</span></p>
                </div>
            </div>
        </div>
        <script>
            $('.pass').click(function () {
                var id = $(this).attr('id');
                settings = {
                    url: "/update/dudao/",
                    type: "get",
                    data: {"project_id": id, "type": 1},
                    success: function (result) {
                        if(result.status==1){
                            alert('恭喜你，培训完成！');
                            window.location.reload()
                        }else {
                            alert(result.message)
                        }

                    }
                };
                $.ajax(settings)
            });
            $('.pass1').click(function () {
                var id = $(this).attr('id');
                settings = {
                    url: "/update/dudao/",
                    type: "get",
                    data: {"project_id": id, "type": 2},
                    success: function (result) {
                        if(result.status==1){
                            alert('恭喜你，取消培训完成！');
                            window.location.reload()
                        }else {
                            alert(result.message)
                        }
                    }
                };
                $.ajax(settings)
            })
        </script>
    {% endif %}
    <script>
        $('.a-content-left').each(function () {
            $(this).click(function () {
                $('.a-content-left').removeClass('hid');
                $(this).addClass('hid');
                var name = $(this).attr('name');
                $('.zz').css('display', 'none');
                $('.' + name).css('display', 'block')
            })
        });

    </script>
{% endblock %}